<template>
  <el-tabs class="list_tabs" type="border-card" v-model="currentName" @tab-click="handleClick">
    <el-tab-pane
      :label="item.name"
      :key="item.status"
      :name="item.status"
      v-for="item in statusArr"
    ></el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      currentName: ""
    }
  },
  created() {
    this.currentName = this.statusArr[0].status
  },
  props: {
    statusArr: Array
  },
  methods: {
    handleClick() {
      this.$emit("changeTabs", this.currentName)
    }
  }
};
</script>

<style lang="scss">
.list_tabs .el-tabs__content {
  display: none;
}
.tabs-right.el-tabs {
  .el-tabs__nav{
    float: right;
  }
}
</style>

<style lang="scss" scoped>
.el-tabs--border-card {
  box-shadow: none;
  border-bottom: 0;
}
</style>
